<template>
  <div>
    <div class="suspension-card" :class="show == 1 ? 'card-close' : show == 2 ? 'card-open' : ''" v-if="dataList.length > 0">
      <div class="title" @click="closeMet()">
        <img v-if="isHide" src="@/assets/images/user/show.png" class="is-show-icon" alt="">
				<img v-if="!isHide" src="@/assets/images/user/hide.png" class="is-show-icon" alt="">
        TOP PICKS
      </div>
      <div class="content">
        <div class="list-goods" v-for="(item, index) in dataList" :key="index"
          :style="index === 0 ? 'margin-top: 0;' : ''" @click="lookDet(item,index)">
          <img :src="item.mainImg" class="img" alt="">
          <div class="info">
            <div class="name">{{ item.title }}</div>
            <div class="amount">{{ userCurrency.code }} {{ item.price }}</div>
          </div>
        </div>
        <div class="more-text" @click="jumpMet()">
          {{ $t('header.more_shop_product') }}
          <Icon type="ios-arrow-forward" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { toSeoFriendsChannel } from '@/common/common';
import { pointUser } from "@/common/point/api-hook";//打点日志
import { detailPoint } from '@/api/user';
export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isHide: true,
			show:0,//0默认 1关 2开
			keyframesLoading:false,
    }
  },
  computed: {
    ...mapState({
      userCurrency: (state) => state.user.userCurrency,
      userInfo: state => state.user.userInfo,
    }),
    imageSrc() {
      return this.isHide ? this.showImg : this.hideImg
    }
  },
  methods: {
    lookDet(item,index) {
      const query = {};
      if (this.userInfo.inviteCode) {
        query.inviteCode = this.userInfo.inviteCode
      }
      const channelId = toSeoFriendsChannel(item.channel);
      let toUrl = this.$router.resolve({
        path: `/product/${channelId}/${item.spu}`,
        query
      });
			let data = {
				channel:1,
				position:index + 1,
				detailUrl:`${this.$store.state.config.config.webDomain}/product/${channelId}/${item.spu}`,
				productChannel:item.channel,
				productType:item.categoryName,
				spuNo:item.spu,
				price:item.price
			}
			detailPoint(data)
      window.open(toUrl.href);
    },
    jumpMet() {
			pointUser('actions', '3003-1');
      this.$router.push('/shopWindow')
    },
    closeMet() {
			if(this.keyframesLoading){//动画当中，再次点击不接受操作
				return;
			}
			this.show = this.show == 0 ? 1 : 2;
			this.keyframesLoading = true;
			setTimeout(()=>{
				this.isHide = !this.isHide;
				this.keyframesLoading = false;
				if(this.show == 2){
					this.show = 0;
				}
			},1000)
    }
  }
}
</script>
<style lang="less" scoped>
@cardWidth:27.0833vw;//520px
@cardHeight:21.719475vw;//417px
@cardContentWidth:22.916vw;//440px
@cardTitleWidth:3.125vw;//60px
@cardRight:1.25vw;//24px
@closeCardHeight:11.71875vw;//225px
@cardCloseRadius:0.625vw 0 0 0.625vw;//12px
@cardOpenRadius:0.625vw 0.625vw 0.625vw 0.625vw;//12px
@cardOpenPadding:1.04166vw 1.04166vw 1.04166vw 0;//20px

.card-close{
	animation: cardClose 1s forwards;
	.content{
		animation: contentClose 1s forwards;
	}
}

@keyframes cardClose {
	0% {
		width: @cardWidth;
		right: @cardRight;
		height: @cardHeight;
		top:40%;
	}
	100% {
		width: @cardTitleWidth;
		height: @closeCardHeight;
		right: 0px;
		padding:0;
		border-radius: @cardCloseRadius;
		top:25%;
	}
}
@keyframes contentClose{
	0% { width: @cardContentWidth; }
	100% { width: 0px; }
}
.card-open{
	animation: cardOpen 1s forwards;
	.content{
		animation: contentOpen 1s forwards;
	}
}
@keyframes cardOpen{
	0% {
		width: @cardTitleWidth;
		height: @closeCardHeight;
		right: 0px;
		padding:0;
		border-radius: @cardCloseRadius;
		top:25%;
	}
	100% {
		width: @cardWidth;
		right: @cardRight;
		height: @cardHeight;
		border-radius: @cardOpenRadius;
		padding: @cardOpenPadding;
		top:40%;
	}
}
@keyframes contentOpen{
	0% { width: 0 }
	100% { width: @cardContentWidth; }
}
.suspension-card {
  width: @cardWidth;
  height: @cardHeight;
  padding: @cardOpenPadding;
  background: #FFFFFF;
  border-radius: @cardOpenRadius;
  position: absolute;
  top: 40%;
  right: @cardRight;
  transform: translateY(-50%);
  z-index: 101;
  display: flex;
	overflow: hidden;
  .title {
		width: @cardTitleWidth;
    height: 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #1E1714;
    line-height: 23px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-align: center;
    cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
    .is-show-icon {
      width: 20px;
      height: 20px;
			margin-bottom: 5px;
    }
  }

  .content::-webkit-scrollbar {
    display: none;
  }

  .content {
		width: @cardContentWidth;
    height: 387px;
    overflow-y: scroll;
    overflow-x: hidden;
    // margin-left: 16px;

    .list-goods {
      width: @cardContentWidth;
      background: #FFFFFF;
      border-radius: 12px;
      border: 1px solid #F1F2F7;
      display: flex;
      align-items: center;
      margin-top: 17px;
      cursor: pointer;

      .img {
        width: 132px;
        height: 117px;
        border-radius: 12px 0 0 12px;
        margin-right: 16px;
				object-fit: cover;
      }

      .info {
        .name {
          width: 279px;
          height: 48px;
          white-space: pre-line;
          /*允许换行*/
          overflow: hidden;
          text-overflow: ellipsis;
          /*省略号*/
          display: -webkit-box;
          -webkit-box-orient: vertical;
          /*行向垂直排列*/
          -webkit-line-clamp: 2; //*限制2
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          line-height: 24px;
        }

        .amount {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FF186B;
          line-height: 24px;
          margin-top: 12px;
        }
      }
    }

    .more-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #1E1714;
      line-height: 24px;
      margin-top: 17px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
